<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="can" width="500px" height="500px" style="border: dashed 1px;"></canvas>
		<script>
			var can = document.getElementById("can");
			g = can.getContext("2d");
			
			var r = g.createRadialGradient(250,250,50,250,250,200);
			r.addColorStop(0,"blue");
			r.addColorStop(1,"black");
			g.fillStyle = r;
			g.fillRect(0,0,500,500);
			
			g.beginPath();
			g.arc(250,250,50,0,Math.PI*2,true);
			g.arc(250,250,200,0,Math.PI*2,true);
			g.strokeStyle = "white";
			g.stroke();
			
		</script>
	</body>
</html>
